<template>
    <div class="my-card">
        <el-card>
            <div class="my-search">
                <el-form>
                    <el-row>
                    <el-form-item>
                        <el-date-picker
                        v-model="formInline.date"
                        type="date"
                        placeholder="开始时间"
                        clearable
                    />
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                        v-model="formInline.date"
                        type="date"
                        placeholder="结束时间"
                        clearable
                    />
                    </el-form-item>
                    <el-form-item >
                        <el-input v-model="formInline.user" placeholder="流水类型" clearable />
                    </el-form-item>
                    <el-form-item>
                    <el-input v-model="formInline.user" placeholder="消费/收入类型" clearable />
                    </el-form-item>
                    <el-form-item>
                    <el-input v-model="formInline.user" placeholder="支出/收款方式" clearable />
                    </el-form-item>
                    <el-form-item>
                    <el-input v-model="formInline.user" placeholder="名称" clearable />
                    </el-form-item>
                    <el-form-item>
                    <el-input v-model="formInline.user" placeholder="描述" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button :icon="Search" circle />
                    </el-form-item>
                    </el-row>
                </el-form>
            </div>
            <div class="my-operate">
                <el-row>
                    <el-button type="primary" @click="dialogVisible = true">新增</el-button>
                </el-row>
            </div>
            <div class="my-table">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column fixed prop="number" label="序号" width="150" />
                    <el-table-column prop="date" label="日期" width="120" />
                    <el-table-column prop="flowType" label="流水类型" width="120" />
                    <el-table-column prop="shopType" label="消费/收入类型" width="120" />
                    <el-table-column prop="payType" label="支出/收款方式" width="120" />
                    <el-table-column prop="money" label="金额（元）" width="120" />
                    <el-table-column prop="name" label="名称" width="120" />
                    <el-table-column prop="description" label="描述" width="120" />
                    <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default>
                        <el-button type="primary" @click="handleClick" :icon="Edit" circle />
                        <el-button type="danger" @click="handleClick" :icon="Delete" circle />
                    </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="my-bottom-data">
                <el-row>
                    <div class="left">
                        <p style="color: green;">总收入：3137.06</p>
                        <p style="color: red;">总支出：5104.32</p>
                        <p>不计收支：1266.96</p>
                    </div>
                    <div class="right">
                        <el-config-provider :locale="zhCn">
                            <el-pagination
                                v-model:current-page="currentPage4"
                                v-model:page-size="pageSize4"
                                :page-sizes="[10, 20, 50, 100]"
                                :size="size"
                                :disabled="disabled"
                                background
                                layout="total, sizes, prev, pager, next"
                                :total="400"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                            />
                        </el-config-provider>
                    </div>
                </el-row>
            </div>
        </el-card>

        <el-dialog
            v-model="dialogVisible"
            title="新增流水"
            width="500"
        >
            <div class="my-dialog">
                <el-form>
                    <el-form-item>
                        <el-date-picker
                        v-model="waterFormData.date"
                        type="date"
                        placeholder="日期"
                        clearable
                    />
                    </el-form-item>
                    <el-form-item >
                        <el-input v-model="waterFormData.flowType" placeholder="流水类型" clearable />
                    </el-form-item>
                    <el-form-item>
                    <el-input v-model="waterFormData.shopType" placeholder="消费/收入类型" clearable />
                    </el-form-item>
                    <el-form-item>
                    <el-input v-model="waterFormData.payType" placeholder="支出/收款方式" clearable />
                    </el-form-item>
                    <el-form-item>
                    <el-input v-model="waterFormData.money" placeholder="金额" clearable />
                    </el-form-item>
                    <el-form-item>
                    <el-input v-model="waterFormData.name" placeholder="名称" clearable />
                    </el-form-item>
                    <el-form-item>
                    <el-input v-model="waterFormData.description" placeholder="描述" clearable />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addWater()">
                确认
                </el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import * as MoneyApi from '@/api/money'

const formInline = reactive({
  user: '',
  region: '',
  date: '',
});

const waterFormData = reactive({
    date: '',
    flowType: '',
    shopType: '',
    payType: '',
    money: '',
    name: '',
    description: ''
})

import { ref } from 'vue'
import { Search, Edit, Delete } from '@element-plus/icons-vue';
import { ElConfigProvider } from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';

const tableData = [
  {
    number: '1',
    date: '2024-03-25',
    flowType: '支出',
    shopType: '其他',
    payType: '微信',
    money: '30',
    name: '先用后付',
    description: '零钱'
  },
  {
    number: '2',
    date: '2024-03-24',
    flowType: '支出',
    shopType: '其他',
    payType: '支付宝',
    money: '150',
    name: '微信转账',
    description: '零钱'
  },
  {
    number: '3',
    date: '2024-03-23',
    flowType: '支出',
    shopType: '其他',
    payType: '银行卡',
    money: '200',
    name: '转账',
    description: '消费'
  }
]

const dialogVisible = ref(false)

/**
 * 添加流水
 */
function addWater() {
    dialogVisible.value = false;
}

</script>

<style lang="scss">
    .my-card {
        &>.is-always-shadow {
            box-shadow: none;
        }
    }

    .my-search {
        & .el-row {
            column-gap: 20px;
            padding-bottom: 8px;
            border-bottom: 2px solid #dcdfe6;

            & .el-form-item {
                margin-bottom: 8px;
            }
        }
    }

    .my-operate {
        padding: 10px 0;
        border-bottom: 2px solid #dcdfe6;
    }

    .my-table {
        padding-bottom: 20px;
        border-bottom: 2px solid #dcdfe6;
    }

    .my-bottom-data {

        &>.el-row {
            justify-content: space-between;
            justify-items: center;
            align-items: center;
        }

        & .left {
            display: flex;
            & p {
                padding-right: 15px;
                font-size: 20px;
            }
        }
    }

    
    .my-dialog {
        & .el-date-editor.el-input {
            width: 100%;
        }
    }
</style>